<template>
	<view class="box">
		<view class="none tr" style="margin-top: 100rpx;" v-if="!shopList.length">
			没有兑换产品哦~
		</view>
		<view class="list2 fw-bt" v-else>
			<view class="shop-demo" v-for="(item,index) of shopList" :key="index" @click="goShopDetail(item.id)">
				<!--图片 -->
				<view class="shop-img f-w">
					<image :src="item.img" mode=""></image>
				</view>
				<!-- 名字 -->
				<view class="shop-name hide-line2 bold f28">{{item.title}}</view>
				<view class="shop-price c3 f-w">
					<!-- 价格 -->
					<view class="f-w">
						<view class="f24">￥</view>
						<view class="bold f28">{{item.price}}</view>
					</view>
					<view class="f24 c999">￥22.9</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopList: [{
						id: 1,
						img: 'https://jw.xzsw2021.com/static/index/tu_28@2x.png',
						title: '樱桃小西红柿 果番茄樱桃小西红柿 果番茄樱桃小西红柿 果番茄樱桃小西红柿 果番茄',
						shop_name: '佳慧超市（弹子石菜市场）',
						price: '22.9',
						shop_img: 'https://jw.xzsw2021.com/static/index/tx_3@2x.png',
						desc: '最近浏览过',
						good: 'https://jw.xzsw2021.com/static/index/icon_54@2x.png'

					},
					{
						id: 2,
						img: 'https://jw.xzsw2021.com/static/index/tu_28@2x.png',
						title: '千禧圣女果番茄',
						shop_name: '佳慧超市（弹子石菜市场）',
						price: '100.9',
						shop_img: 'https://jw.xzsw2021.com/static/index/tx_3@2x.png',
						desc: '前购买过之前购买过之前购买过'
					},
					{
						id: 3,
						img: 'https://jw.xzsw2021.com/static/index/tu_28@2x.png',
						title: '樱桃小西红柿千禧圣女 果番茄',
						shop_name: '佳慧超市（弹子石菜市场）',
						price: '9.9',
						desc: '之前购买过之前购买过之前购买过'
					}
				], //商品列表
			}
		},
		methods: {
			// 去商品详情
			goShopDetail(id) {
				console.log('购买商品');
				uni.navigateTo({
					url:'/pages/client/shop/shop-detail/shop-detail?id='+id+'&type=3'
				})
			},
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.box {
		padding: 20rpx 20rpx 120rpx;
		.shop-btn{
			width: 40rpx;
			height: 40rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.c1{
			color: #109C7A;
			font-weight: bold;
		}
		.c2{
			color: #FCA223;
		}
		.c3{
			color: #F45E14;
		}
		.list2 {
			flex-wrap: wrap;
			overflow: hidden;
			&>view {
				position: relative;
				margin-bottom: 20rpx;
				width: 344rpx;
				min-height: 480rpx;
				padding: 20rpx 26rpx 35rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				box-sizing: border-box;

				.shop-img {
					width: 284rpx;
					height: 284rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.shop-name {
					margin: 20rpx 0 10rpx;
					height: 72rpx;
				}

				.shop-name2 {
					height: 64rpx;
					font-size: 24rpx;
					color: #666;
				}

				.shop-price {
					margin-top: 24rpx;
					.c999{
						margin-top: 4rpx;
						margin-left: 12rpx;
						text-decoration: line-through;
					}
				}

				.shop-tag {
					position: absolute;
					top: 16rpx;
					left: 16rpx;
					width: 60rpx;
					height: 60rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.shop-good {
					position: absolute;
					top: 0;
					right: 16rpx;
					width: 53rpx;
					height: 71rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.shop-history {
					position: absolute;
					top: 12rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 180rpx;
					text-align: center;
					white-space: nowrap;
					overflow: hidden;
				}
			}
		}
	}
</style>
